<template>
  <!-- 说明类弹框 -->
  <view class="common_pop_comp">
    <u-popup v-model="show" mode="center" width="602" border-radius="25" :mask-close-able="false">
      <view class="pop_box">
        <view class="title_box">{{title}}</view>
        <scroll-view class="explain" :scroll-y="true" style="max-height: 420rpx;">
          <u-parse :html="explain"></u-parse>
        </scroll-view>
        <view class="btn_box">
          <button class="btn btn_confirm" @click="closePop">{{btnText}}</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    showPop:{
      type: Boolean,
    },
    title: {
      type: String,
      default: "说明"
    },
    explain: {
      type: String,
      default: ""
    },
    btnText: {
      type: String,
      default: "关闭"
    },
  },
  data() {
    return {
      show: false,
    };
  },
  computed:{
  },
  watch: {
    showPop(value) {
      this.show = !this.show;
    },
  },
  created() {
    this.show = this.showPop
  },
  methods: {
    closePop(){
      this.show = false
    },
  }
};
</script>

<style scoped lang="scss">
.common_pop_comp {
  .pop_box {
    padding: 48rpx 42rpx 50rpx;
    .title_box{
      text-align: center;
      font-size: 36rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 50rpx;
    }
    .explain{
      // height: 800rpx;
      margin-top: 48rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #777777;
      line-height: 44rpx;
      white-space: pre-wrap;
    }
    .btn_box{
      margin-top: 60rpx;
      .btn_confirm{
        width: 483rpx;
        height: 75rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 75rpx;
        border-radius: 36rpx;
        background-color: #4C9AF5;
      }
    }
  }
}
</style>
